$topNavHeight:50px;//上方导航栏的高度
$logoHeight:35px;//logo高

$leftNavWidth:220px;//左侧导航栏的宽度
$lowLiHeight:50px;//左侧导航栏下级li的高度
$divHeight:50px;//左侧导航栏div的高度

$linkColor:white,black, red;//链接文字的颜色(初始颜色、hover颜色)
//li的颜色（上方导航栏颜色、左侧上级导航栏颜色、左侧下级导航栏颜色，鼠标滑过颜色、选中颜色）
//$liColor: #1b62ab, #1a6cb9,rgb(14, 50, 91),#326ea5,
//#0f4679;
$liColor: rgba(35, 35, 35, 0.9), rgba(0, 0, 0, 0.73), #333333,rgba(255, 0, 0, 0.65),
red;


@mixin vertialAlignCenter($height){//设置文字垂直居中
  height:$height;
  line-height: $divHeight;
}

html,body,p{
  padding:0;
  margin:0;
  font-family: "Bauhaus 93";
  height:100%;
}
body{
  width:100%;
}
li{
  list-style: none;
}
a{
  text-decoration: none;
  color:nth($linkColor,1);
  &:hover{
    color:nth($linkColor,3);
  }
}
.top-nav{
  background-color: nth($liColor,1);
  width:100%;
  height:$topNavHeight;
  color: white;
  position: relative;
  img{
    float:left;
    width:9%;
    height:$logoHeight;
    margin-left: 15px;
    margin-top: (($topNavHeight)-($logoHeight))/2;
    cursor: pointer;
  }
  p{
    font-size: 25px;
    width:26%;
    padding-left: 19px;
    line-height: $topNavHeight;
    &:hover{
      cursor: pointer;
    }
  }
  li{
    margin-right: 2%;
    position:absolute;
    bottom:12px;
    right:15px;
  }
}

.left-nav{
  width:$leftNavWidth;
  height:100%;
  font-size: 14px;
  letter-spacing: 1px;
  .leval{
    height:100%;
    background-color: nth($liColor,2);
    margin: 0;
    padding:0;
    li{
      cursor: pointer;
      color: white;
      //border-bottom:1px solid rgba(23, 23, 23, 0.54);
      border-bottom:1px solid rgba(190, 190, 190, 0.64);
      div{
        @include vertialAlignCenter($divHeight);
        padding-left: 44px;
        position: relative;

        &:hover{
          transition: all 0.8s;
          background-color: nth($liColor,4);
        }
      }
    }
    @mixin Img($width,$height,$top){
      position: absolute;
      width:$width;
      height:$height;
      top:$top;
    }
    img[alt="tubiao"]{
      @include Img(20px,20px,(($divHeight)-(12px))/2);
      left:14px;
    }
    img[alt="angle"]{
      right:10px;
      @include Img(12px,12px,(($divHeight)-(12px))/2);
    }
  }
  .low-leval{
    padding: 0;
    li{
      padding-left: 60px;
      //border-top:1px solid rgba(23, 23, 23, 0.54);
      border-top:rgba(190, 190, 190, 0.64);
      border-bottom-style: none;
      @include vertialAlignCenter($lowLiHeight);
      background-color: nth($liColor,3);
      &:hover{
        transition: all 0.8s;
        background-color: nth($liColor,4);
      }
    }
  }
  .current{
    background-color: nth($liColor,5);
  }
}